<template>
    <div class="clock-attr">
        <div class="main-panel-wrap-border">
            <div class="main-panel-title">
                <span>时针</span>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">指针长度</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="clock.getHPointerLengthName()" class="mas-basis-input mas-basis-input2" @input="clock.setHPointerLength(currentElementList[0], JQuery('#' + clock.getHPointerLengthName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 159)" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">指针宽度</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="clock.getHPointerWidthName()" type="number" class="mas-basis-input mas-basis-input2" @input="clock.setHPointerWidth(currentElementList[0], JQuery('#' + clock.getHPointerWidthName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 160)" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">指针颜色</div>
                <div class="main-mas-input-simple main-long-content-color">
                    <div class="mas-basic-layout">
                        <el-color-picker ref="HPointerColorPicker" @change="clock.setHPointerColor(currentElementList[0], $event);history.addHistory(store.clone(), 161); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.option.series[0].pointer.itemStyle.color" size="mini" show-alpha></el-color-picker>
                    </div>
                    <div class="main-long-content-label" @click="$refs['HPointerColorPicker'].showPicker = true">{{ currentElementList[0].attribute.chartOption.option.series[0].pointer.itemStyle.color }}</div>
                </div>
            </div>
        </div>
        <div class="main-panel-wrap-border">
            <div class="main-panel-title">
                <span>分针</span>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">指针长度</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="clock.getMPointerLengthName()" class="mas-basis-input mas-basis-input2" @input="clock.setMPointerLength(currentElementList[0], JQuery('#' + clock.getMPointerLengthName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 162)" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">指针宽度</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="clock.getMPointerWidthName()" type="number" class="mas-basis-input mas-basis-input2" @input="clock.setMPointerWidth(currentElementList[0], JQuery('#' + clock.getMPointerWidthName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 163)" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">指针颜色</div>
                <div class="main-mas-input-simple main-long-content-color">
                    <div class="mas-basic-layout">
                        <el-color-picker ref="MPointerColorPicker" @change="clock.setMPointerColor(currentElementList[0], $event);history.addHistory(store.clone(), 164); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.option.series[1].pointer.itemStyle.color" size="mini" show-alpha></el-color-picker>
                    </div>
                    <div class="main-long-content-label" @click="$refs['MPointerColorPicker'].showPicker = true">{{ currentElementList[0].attribute.chartOption.option.series[1].pointer.itemStyle.color }}</div>
                </div>
            </div>
        </div>
        <div class="main-panel-wrap-border">
            <div class="main-panel-title">
                <span>秒针</span>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">指针长度</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="clock.getSPointerLengthName()" class="mas-basis-input mas-basis-input2" @input="clock.setSPointerLength(currentElementList[0], JQuery('#' + clock.getSPointerLengthName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 165)" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">指针宽度</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="clock.getSPointerWidthName()" type="number" class="mas-basis-input mas-basis-input2" @input="clock.setSPointerWidth(currentElementList[0], JQuery('#' + clock.getSPointerWidthName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 166)" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">指针颜色</div>
                <div class="main-mas-input-simple main-long-content-color">
                    <div class="mas-basic-layout">
                        <el-color-picker ref="SPointerColorPicker" @change="clock.setSPointerColor(currentElementList[0], $event);history.addHistory(store.clone(), 167); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.option.series[2].pointer.itemStyle.color" size="mini" show-alpha></el-color-picker>
                    </div>
                    <div class="main-long-content-label" @click="$refs['SPointerColorPicker'].showPicker = true">{{ currentElementList[0].attribute.chartOption.option.series[2].pointer.itemStyle.color }}</div>
                </div>
            </div>
        </div>
        <div class="main-panel-wrap-border">
            <div class="main-panel-title">
                <span>中心点</span>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">大小</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="clock.getAnchorSizeName()" class="mas-basis-input mas-basis-input2" @input="clock.setAnchorSize(currentElementList[0], JQuery('#' + clock.getAnchorSizeName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 168)" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">颜色</div>
                <div class="main-mas-input-simple main-long-content-color">
                    <div class="mas-basic-layout">
                        <el-color-picker ref="AnchorColorPicker" @change="clock.setAnchorColor(currentElementList[0], $event);history.addHistory(store.clone(), 169); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.option.series[2].anchor.itemStyle.color" size="mini" show-alpha></el-color-picker>
                    </div>
                    <div class="main-long-content-label" @click="$refs['AnchorColorPicker'].showPicker = true">{{ currentElementList[0].attribute.chartOption.option.series[2].anchor.itemStyle.color }}</div>
                </div>
            </div>
        </div>
        <div class="main-panel-wrap-border">
            <div class="main-panel-title">
                <span>刻度线</span>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">粗细</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="clock.getSplitLineWidthName()" class="mas-basis-input mas-basis-input2" @input="clock.setSplitLineWidth(currentElementList[0], JQuery('#' + clock.getSplitLineWidthName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 170)" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">距离</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="clock.getSplitLineDistanceName()" class="mas-basis-input mas-basis-input2" @input="clock.setSplitLineDistance(currentElementList[0], JQuery('#' + clock.getSplitLineDistanceName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 171)" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">颜色</div>
                <div class="main-mas-input-simple main-long-content-color">
                    <div class="mas-basic-layout">
                        <el-color-picker ref="SplitLineColorPicker" @change="clock.setSplitLineColor(currentElementList[0], $event);history.addHistory(store.clone(), 172); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.option.series[0].splitLine.lineStyle.color" size="mini" show-alpha></el-color-picker>
                    </div>
                    <div class="main-long-content-label" @click="$refs['SplitLineColorPicker'].showPicker = true">{{ currentElementList[0].attribute.chartOption.option.series[0].splitLine.lineStyle.color }}</div>
                </div>
            </div>
        </div>
        <div class="main-panel-wrap-border">
            <div class="main-panel-title">
                <span>最外线</span>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">粗细</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="clock.getAxisLineWidthName()" class="mas-basis-input mas-basis-input2" @input="clock.setAxisLineWidth(currentElementList[0], JQuery('#' + clock.getAxisLineWidthName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 173)" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">颜色</div>
                <div class="main-mas-input-simple main-long-content-color">
                    <div class="mas-basic-layout">
                        <el-color-picker ref="AxisLineColorPicker" @change="clock.setAxisLineColor(currentElementList[0], $event);history.addHistory(store.clone(), 174); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.option.series[0].axisLine.lineStyle.color[0][1]" size="mini" show-alpha></el-color-picker>
                    </div>
                    <div class="main-long-content-label" @click="$refs['AxisLineColorPicker'].showPicker = true">{{ currentElementList[0].attribute.chartOption.option.series[0].axisLine.lineStyle.color[0][1] }}</div>
                </div>
            </div>
        </div>
        <div class="main-panel-wrap-border">
            <div class="main-panel-title">
                <span>文字</span>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">大小</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="clock.getAxisLabelSizeName()" class="mas-basis-input mas-basis-input2" @input="clock.setAxisLabelSize(currentElementList[0], JQuery('#' + clock.getAxisLabelSizeName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 175)" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">距离</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="clock.getAxisLabelDistanceName()" class="mas-basis-input mas-basis-input2" @input="clock.setAxisLabelDistance(currentElementList[0], JQuery('#' + clock.getAxisLabelDistanceName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 176)" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">颜色</div>
                <div class="main-mas-input-simple main-long-content-color">
                    <div class="mas-basic-layout">
                        <el-color-picker ref="AxisLabelColorPicker" @change="clock.setAxisLabelColor(currentElementList[0], $event);history.addHistory(store.clone(), 177); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.option.series[0].axisLabel.color" size="mini" show-alpha></el-color-picker>
                    </div>
                    <div class="main-long-content-label" @click="$refs['AxisLabelColorPicker'].showPicker = true">{{ currentElementList[0].attribute.chartOption.option.series[0].axisLabel.color }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import store from '@/js/store/state.js';
import clock from '@/js/main/attribute/clock.js';
import history from '@/js/main/history.js';
import system from '@/js/main/system.js';
import register from '@/js/main/register.js';
import JQuery from 'jquery';
export default {
    data() {
        return {
            currentElementList: store.getCurrentElementList(),
            store: store,
            clock: clock,
            history: history,
            register: register,
            system: system,
            JQuery: JQuery
        };
    },
    mounted() {
        clock.setAttribute(this.currentElementList[0]);
    }
};
</script>

<style lang="scss" scoped>
.clock-attr {
    position: relative;
    padding-bottom: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    .base-row-item {
        height: 30px;
        width: 100%;
        display: grid;
        grid-gap: 6px;
        align-items: center;
        font-weight: 600;
        cursor: auto;
    }
    .base-row-2 {
        grid-template-columns: 60px 1fr 0;
    }
}
.main-panel-wrap-border {
    display: grid;
    grid-row-gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ffffff0f;
}
</style>